<!DOCTYPE HTML>

<html>
  <head>
    <title>Example Title</title>
    <style>
        .draggable {
            display: block;
            background-color: #0000ff;
            width: 100px;
            height: 30px;
        }

        .droppable {
            display: block;
            background-color: #ccc;
            width: 200px;
            height: 50px;
        }
    </style>
    <script type="text/javascript" src="/static/jquery.min.js"></script>
    <script type="text/javascript" src="/static/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript">
        function addShadowRoot() {
            var elem = document.getElementById('has_shadow_root');
            var shadow = elem.attachShadow({mode: 'open'});

            shadow.innerHTML = '<div id="text_in_shadow_root" name="text_in_shadow_root_name">Inside a shadow root</div>'
        }

        document.addEventListener('DOMContentLoaded', function() {
            addShadowRoot();
        }, false);

        $(document).ready(function() {
            $(".draggable").draggable();
            $(".droppable").droppable({
                drop: function() {
                    $('.dragged').html('yes');
                }
            });
            $("body").dblclick(function(){
                $("body").css("background-color", "#ff0000");
            });
            $(".should-be-visible-after-double-click").hide();
            $(".db-button").dblclick(function(){
                $(".should-be-visible-after-double-click").show();
            });
           $(".add-async-element").click(function() {
                setTimeout(function() {
                    $('body').append('<h4 id="async-header" value="async-header-value" class="async-element">async elment</h4>');
                    $('body').append('<input type="text" name="async-input" class="async-input" />');
                }, 1200 );
                setTimeout(function() {
                    $('body').append('<h5 id="async-header2" class="async-element2">async elment2</h5>');
                    $('body').append('<input type="text" name="async-input2" class="async-input2" />');
                }, 2400 );
           });

           $('.right-clicable').bind('contextmenu', function(){
                $(this).html('right clicked');
           });

           $(".remove-async-element").click(function() {
                setTimeout(function() {
                    $('.async-element').remove();
                    $('.async-input').remove();
                }, 1200 );
                setTimeout(function() {
                    $('.async-element2').remove();
                    $('.async-input2').remove();
                }, 2400 );
           });

           $(".show-invisible-element").click(function() {
               $('#invisible').show();
           });

           $(".add-element-mouseover").mouseover(function () {
                $('body').append('<label for="what-is-your-name" class="over-label">What is your name?</label>');
                $('body').append('<input type="text" id="what-is-your-name" class="over-input" name="whatsname" />');
           });

           $(".add-element-mouseover").mouseout(function () {
                $('.over-label').remove();
                $('.over-input').remove();
           });

          setTimeout(function() {
              $('#removed_after_5_seconds').remove();
          }, 5000 );

        });
    </script>
  </head>
  <body>
    <h1 id="firstheader">Example Header</h1>
    <h1 id="firstheader">Example Last Header</h1>
    <button id="button-value">some value</button>
    <form action="name" method="GET">
        <label for="query">Query</label>
        <input type="text" name="q" />
        <input type="text" name="input1" value="default value" />
        <input type="text" name="input1" value="default last value" />
        <input type="text" name="query" value="default value" />
        <input name="typeless" value="default value" />
        <input type="password" name="password" />
        <input type="tel" name="telephone" />
        <input type="search" name="search_keyword" />
        <label for="send">Send</label>
        <input type="submit" name="send" />
        <input type="radio" name="gender" value="M" id="gender-m" /> Male
        <input type="radio" name="gender" value="F" id="gender-f" /> Female
        <input type="checkbox" name="some-check" value="choice" />
        <input type="checkbox" name="checked-checkbox" value="choosed" checked="checked" />
        <select name="uf">
            <option value="mt">Mato Grosso</option>
            <option value="rj">Rio de Janeiro</option>
        </select>
        <select name="food">
            <optgroup label="Fruit">
                <option value="apples" selected>Apples</option>
                <option value="grapes">Grapes</option>
            </optgroup>
            <optgroup label="Vegetables">
                <option value="carrots">Carrots</option>
                <option value="celery">Celery</option>
            </optgroup>
        </select>
        <select name="pets" multiple="multiple">
            <option value="cat">Cat</option>
            <option value="dog">Dog</option>
            <option value="fish">Fish</option>
        </select>
        <label for="description">Description</label>
        <textarea rows="3" cols="50" name="description"></textarea>
    </form>
    <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="file">
        <input type="submit" name="upload" value="submit" />
    </form>

    <form action="/post" method="POST">
      <button type="submit" name="submit-button" value="submit-button-value">Submit button</button>
      <button type="submit" name="submit-button-no-value">Submit button</button>
      <button type="submit" class="submit-button-empty">Submit button</button>
      <button type="submit" class="submit-button-no-name" value="submit-button-value">Submit button</button>
      <input type="submit" name="submit-input" value="submit-input-value"/>
      <input type="submit" name="submit-input-no-value"/>
      <input type="submit" class="submit-input-empty"/>
      <input type="submit" class="submit-input-no-name" value="submit-input-value"/>
    </form>


    <form action="/redirected" method="POST">
      <button type="submit" name="redirect" value="submit">Go</button>
    </form>


    <form id='login'>
      First name:<br>
      <input type="text" name="firstname"><br>
      Last name:<br>
      <input type="text" name="lastname">
    </form>

    <form id='urlInput'>
    URL input:<br>
    <input type="url" name="url_input">
    <br>
    </form>

    <a href="http://example.com/">Link for Example.com</a>
    <a href="http://example.com/last">Link for Example.com</a>
    <a href="http://example.com/">Link for last Example.com</a>
    <div id="visible">visible</div>
    <div id="invisible" style="display:none">invisible</div>
    <a class="show-invisible-element" href="#">Show invisible element</a>
    <div id="simple_text">my test text</div>
    <div id="text_with_html">another <b>b</b>it of text</div>
    <a href="http://localhost:5000/foo" id="foo">FOO</a>
    <a href="http://localhost:5000/nested"><div>Nested text</div> <div>in a link.</div></a>
    <a href="http://localhost:5000/foo">
        <i class="fa fa-fw fa-user"></i>
        &nbsp;
        <span>Complex</span>
        <span>Quotation " marks</span>
        <span style="display: inline;" class="env-DEV">Link</span>
    </a>
    <a href="http://localhost:5000/foo">A wordier (and last) link to FOO</a>
    <a href="http://localhost:5000/bar">BAR: <span>first bar</span></a>
    <a href="http://localhost:5000/bar">BAR: <span>second bar</span></a>
    <a class="add-async-element" href="#">add async element</a>
    <a class="remove-async-element" href="#">remove async element</a>
    <a class="add-element-mouseover" href="#">addelement (mouseover)</a>
    <button class="just-a-button"></button>
    <iframe name= "iframemodal-name" id="iframemodal" src="/iframe"></iframe>
    <div id="inside">
        <h2>inside</h2>
        <span class="inside">Complex</span>
        <form>
            <input id="visible" name="crazy-upload" type="text" value="crazy diamond" />
        </form>
    </div>
    <a href="#" class="db-button" onClick="return false;">double click button</a>
    <div class="should-be-visible-after-double-click">should-be-visible-after-double-click</div>
    <div class="right-clicable">no right click</div>
    <div class="draggable">draggable</div>
    <div class="droppable">droppable</div>
    <div class="dragged">no</div>
    <div class="has-class-first has-class-middle has-class-end"></div>
    <div id="html-property" class="outer html classes">inner <div class="inner-html">inner text</div> html test</div>
    <p id="html-property-with-breakline">\n     some text here\n</p>
    <a id="open-popup" href="javascript:poptastic('/popup')">Open pop-up window</a>
    <script>
      function poptastic(url) {
        var pop = window.open(url, 'name', 'width=300, height=300');
        if (window.focus) { pop.focus() }
      }
    </script>
    <a id="pangram_pl" href="http://localhost:5000/pl">Jeżu klątw, spłódź Finom część gry hańb!</a>
    <a id="pangram_ja" href="http://localhost:5000/ja">天 地 星 空</a>
    <a id="pangram_ru" href="http://localhost:5000/ru">В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!</a>
    <a id="pangram_eo" href="http://localhost:5000/eo">Laŭ Ludoviko Zamenhof bongustas freŝa ĉeĥa manĝaĵo kun spicoj.</a>

    <div id='has_shadow_root'></div>
    <div id="zerodiv" style="width: 0px; height: 0px;"></div>

    <button id="removed_after_5_seconds">This button will be removed in 5 seconds</button>
  </body>
</html>
